<script setup lang="ts">
const products = [
  {
    id: 1,
    name: '血糖监测仪',
    description: '便携式智能监测设备...',
    image: '/images/glucometer.png'
  },
  // 更多产品数据...
]
</script>

<template>
  <div class="products-container">
    <h2 class="section-title">医疗产品解决方案</h2>
    
    <div class="product-grid">
      <div 
        v-for="product in products"
        :key="product.id"
        class="product-card"
      >
        <img 
          :src="product.image" 
          :alt="product.name"
          class="product-image"
        >
        <div class="product-info">
          <h3>{{ product.name }}</h3>
          <p>{{ product.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use "@/styles/_variables.scss";

.products-container {
  padding: 6rem 5% 3rem;
  
  .section-title {
    color: $sansure-dark;
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.2rem;
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    
    .product-card {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 3px 6px rgba(0,0,0,0.1);
      
      .product-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
      }
      
      .product-info {
        padding: 1.5rem;
        
        h3 {
          color: $sansure-blue;
          margin-bottom: 0.8rem;
        }
        
        p {
          color: $sansure-dark;
          line-height: 1.6;
        }
      }
    }
  }
}
</style>